import R from 'ant-design-vue/es/date-picker'
import { commonProps } from '../_util/util'

const Picker = {
  day: R,
  month: R.MonthPicker,
  week: R.WeekPicker,
  range: R.RangePicker
}

export default {
  data() {
    this.Picker = Picker
    return {
    }
  },
  props: Object.assign({}, R.RangePicker.props, commonProps, {
    initialValue: {
      type: Array,
      default: function() { return [] },
      required: false
    },
    dateType: {
      type: String,
      default: 'range',
      required: false
    }
  }),
  watch: {

  },
  created() {
    this.formItemId && this.form.getFieldDecorator(this.formItemId, this.formOptions)
  },
  methods: {
    handleChange(value) {
      console.log(value)
      // this.value = value
      this.$forceUpdate()
      if (this.formItemId) {
        this.form.setFieldsValue({ [this.formItemId]: value })
      }
    }
  },
  render() {
    const {
      // dateType = 'range',
      // disabledDate = false,
      // ranges = {},
      value,
      onChange,
      initialValue,
      formOptions: { initialValue: initialValue2 },
      form,
      formItemId,
      setStyle,
      ...rest
    } = this.$props
    // const Comp = this.Picker[dateType]
    var restObj = rest
    for (var key in restObj) {
      if (restObj[key] === undefined) { delete restObj[key] }
    }
    return (
      <div>
        <a-range-picker
          style={setStyle}
          {...{ props: { ...restObj, defaultValue: initialValue2 || initialValue }}}
          onChange={this.handleChange}
        />
      </div>
    )
  }
}
